フィルタとは文字や画像などに特殊効果を与える機能で、影を付けたり、半透明のグラデーションにしたり、にじみ、うねり、といった効果を追加できるものです。標準的なスタイルシートではなくInternet Explorer 4.0以上のビルトイン機能となってしまうため、正しく表示されるブラウザが制限されてしまうというデメリットを持っていますが、何より手軽に利用できるのが魅力です。

では、実際にフィルタの効果を体感してみましょう。今週は、半透明のグラデーション効果を与えるフィルタ「alpha」を紹介します。フィルタの書式は、スタイルシートと似たような感じで、タグに埋め込む場合は「style="filter:alpha(属性値)"」と記述します。指定する属性値はフィルタごとに異なっており、フィルタ「alpha」の場合、グラデーションの形を決定するstyleという属性が用意されています。styleの値は0〜3が指定可能で、以下のように変化します。 ■属性値の値と効果 　0：全体を半透明にする 　1：線形にグラデーション 　2：円形にグラデーション 　3：長方形にグラデーション style=0<BR> <IMAGE src="syashin.jpg" style="filter:alpha(style=0)"> <BR><BR> style=1<BR> <IMAGE src="syashin.jpg" style="filter:alpha(style=1)"> <BR><BR> style=2<BR> <IMAGE src="syashin.jpg" style="filter:alpha(style=2)"> <BR><BR> style=3<BR> <IMAGE src="syashin.jpg" style="filter:alpha(style=3)">

初期状態では透明度が1〜100に変化するグラデーションで表示されますが、これらはopacityとfinishopacityの値を1〜100で指定することにより変更できます。また、style=1の場合は、startxとstartyで透明処理の開始位置を、finishxとfinishyで透明処理の終了位置を指定することも可能です。なお、フィルタが機能しない場合は、横幅を指定するスタイルシート「with」などを追加することにより、正しくフィルタを機能できるようになります。 <FONT size="6" color="#0000FF"> <DIV style="width=500 ; filter:alpha(style=1,opacity=90,finishopacity=10)"> 透明度が90から10に変化します。 </DIV> <DIV style="width=500 ; filter:alpha(style=1,opacity=50,finishopacity=10)"> 透明度が50から10に変化します。 </DIV> <DIV style="width=500 ; filter:alpha(style=1,opacity=20,finishopacity=10)"> 透明度が20から10に変化します。 </DIV> <DIV style="width=500 ; filter:alpha(style=1,opacity=20,finishopacity=80)"> 透明度が20から80に変化します。 </DIV> </FONT>

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��